// 类似vue中的app.vue 是项目中最大的组件 别的组件都是他的子组件
import logo from './logo.svg';
import './App.css';
import ComA from './components/ComA';

function App() {
  let age = 18;
  let name = 'Mabaoguo';
  let obj1 = {
    name: 'Pony Ma',
    age: 45,
    hasWude: false,
    hobby: ['唱','跳','rap','打篮球']
  }

  let change = ()=> {
    obj1.hasWude = !obj1.hasWude;
    console.log(obj1.hasWude);
  }
  // 小括号的目的：表示这是一个整体，避免自动插入分号
  return (
    <div className="App">
      <header className="App-header">
        <ComA></ComA>
        {/* jsx语法 html和js混写。区分的方法：<>里面是html代码 {}里面是js代码 */}
        <img src={logo} className="App-logo" alt="logo" />
        {/* ES6绑定事件的方式 */}
        <button onClick={()=>change()}>toggle</button>
        <p>{age+2}</p>
        <h1>{name}</h1>
        <div>{obj1.name}</div>
        <div>{obj1.hobby[0]}</div>
        <div>{obj1.hasWude?'':'不'}讲武德</div>
        {/* 循环显示 v-for */}
        {
          obj1.hobby.map((item,index) => {
            return (
              <button key={index}>{item}</button>
            )
          })
        }
        {/* 条件判断 */}
        {
          (function() {
            if(obj1.hasWude) {
              return <p>将武德！</p>
            }else {
              return <mark>不讲武德</mark>
            }
          })()
        }
      </header>
    </div>
  );
}

export default App;
